<template>
    <el-col  :style="{height:heightLength+'px'}" class="el-left-menu" :span="3">
        <el-menu  background-color="#324157" text-color="#bfcbd9" :default-active="active" :active="active"  class="el-menu-vertical-demo"  router unique-opened>
            <el-submenu v-for="menuItem in routeList" :key="menuItem.menuUrl" :index="menuItem.menuUrl">
                <template slot="title">
                    <!-- <i :class="menuItem.icon"></i> -->
                    <span>{{menuItem.menuName}}</span>
                </template>
                <el-menu-item  v-for="item in menuItem.childMenus"  :key="item.menuName"  :index="item.menuUrl">{{item.menuName}} </el-menu-item>
                <!-- <el-submenu v-for="item in menuItem.childPermissions" :key="item.id" :index="item.menuUrl"  v-if='item.childPermissions.length'>
                    <template slot="title">
                        <span>{{item.menuName}}</span>
                    </template>
                    <el-menu-item  v-for="list in item.childPermissions"  :key="list.menuName"  :index="list.menuUrl">  {{list.menuName}} </el-menu-item>
                </el-submenu> -->
            </el-submenu>
        </el-menu>
    </el-col>
</template>


<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
var routerList = require('./router-leftBar.js');
// console.log(routerList);
export default {
  data () {
    return {
        active:'',
        routeList:[],   
        heightLength:''                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
    }
  },
  created(){
    //    this.routeList = routerList.default.routerList
       this.leftPermission();
       this.heightLength = document.body.scrollHeight;
    //    this.active = '/'+ this.$router.currentRoute.path.split('/')[1];
  },
   $route(to, from) {
    setTimeout(() => {
      this.active = "/" + this.$router.currentRoute.path.split("/")[1];
    },300);
  },
  mounted(){
       window.addEventListener('scroll', ()=>{
         let scrollHeight = document.body.scrollHeight;
         this.heightLength =scrollHeight;
       })
  },
  methods:{
    leftPermission(){
        let url = CONSTANT.URL.SYSTEM.FINDUSERPERMISSIONS;
        // common.requestAjax(url,null,null,(res)=>{
        common.get(url,'',(res)=>{
            this.routeList = res.data.bussData;
            this.active  = '/'+ this.$router.currentRoute.path.split('/')[1];
        })
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
    .el-left-menu{
      height:1000px;
      position: fixed;
      left: 0;
      width: 206px;
    }
    .el-menu-vertical-demo{
      height: 100%;
    }

    .el-menu-item{
        min-width:auto!important;
    }
    .el-menu-item-group__title{
        padding-top: 0px!important;
    }
    .el-menu-item{
        a{
            display: block;
            color: #bfcbd9;
        }
        &.is-active{
            a{
              color: #0E932E;
            }
        }
    }
    .el-menu-vertical-demo{
        height: 100%;
        overflow-y: auto;
        padding-bottom: 10%;
        .el-submenu{
            &:last-child{
                margin-bottom: 100px;
            }
        }
        &::-webkit-scrollbar {  
            width: 14px;  
            height: 14px;  
        }  
            
        &::-webkit-scrollbar-track,  
        &::-webkit-scrollbar-thumb {  
            border-radius: 999px;  
            border: 5px solid transparent;  
        }  
            
        &::-webkit-scrollbar-track {  
            box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  
        }  
            
        &::-webkit-scrollbar-thumb {  
            min-height: 20px;  
            background-clip: content-box;  
            box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  
        }  
            
        &::-webkit-scrollbar-corner {  
            background: transparent;  
        }  
    }
</style>
